<template>
  <div class="dashboard-container">
    <div style="height:30px;margin-top:10px;margin-right:23px;"></div>
    <div class="app-container">
      <el-card shadow="never">
        <el-table
          :data="dataList"
          style="width:100%;"
          row-key="courseCategoryId"
          border
          default-expand-all
          :tree-props="{children: 'categoryTreeNodes'}"
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="name" label="编码" align="center"></el-table-column>
          <el-table-column prop="label" label="兴趣标签" align="center"></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.isShow=='1'">可用</span>
              <span v-else>不可用</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script>
import { list } from '@/api/xczx/category'
import { transformTozTreeFormat } from '@/utils/index'
export default {
  name: 'Category',
  components: {},
  data() {
    return {
      dataList: [],
      dataList1: [],
      dataList2: [],
      dataList3: [],
      dataStr: '',
      titleInfo: {
        pageTitle: '',
        text: ''
      },
      formData: {
        isShow: '1',
        label: '1'
      }
    }
  },
  methods: {
    // 初始数据
    initialDate() {
      // 读取数据
      this.getList()
    },
    // 获取列表数据
    async getList(params) {
      this.listLoading = true
      const { data: res } = await list(this.requestParameters)
      this.dataList1 = this.forumTreeData(res)
      this.dataList1.forEach(item => {
        this.dataList2 = item.categoryTreeNodes
      })
      this.dataList = this.dataList2
    },
    handleNodeClick(data) {
      console.log(data)
    },
    query() {
      this.formData = {}
    },
    handleAddPCategory() {
      this.$refs.addPCategory.dialogFormV()
      this.titleInfo.text = '添加方向'
    },
    // 添加/编辑分类
    handleEditCate(id, text) {
      this.$refs.editCategory.dialogFormV()
      this.titleInfo.text = text
      if (text == '编辑分类') {
        this.hanldeEditForm(id)
      } else {
        this.hanldeAddForm(id)
      }
    },
    // 添加分类表单
    async hanldeAddForm(id) {
      this.formData.courseCategoryId = id
    },
    // 编辑分类表单
    async hanldeEditForm(id) {
      this.formData.courseCategoryId = id
      this.formData = res
    }
  },
  // 挂载结束
  mounted: function() {},
  // 创建完毕状态
  created() {
    var _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },
  // 组件更新
  updated: function() {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>
<style>
.el-table th {
  background-color: #ffffff;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
